
import { Input } from '@/components/ui/input';
import MenuToggle from '../components/MenuToggle';
import { CardContent, CardHeader, Card, CardTitle } from '@/components/ui/card';
import { Switch } from '@/components/ui/switch';
import { Textarea } from '@/components/ui/textarea';
import { SelectItem, Select, SelectContent, SelectValue, SelectTrigger } from '@/components/ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Mail, RotateCcw, Server, Shield, Globe, Database, Upload, Save, Settings } from 'lucide-react';
import React, { useState } from 'react';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
const SystemConfig = ({ toggleSidebar }) => {
  // 系统基础配置
  const [basicConfig, setBasicConfig] = useState({
    siteName: '筋斗云私有云盘',
    siteDescription: '智能私有云盘系统',
    siteUrl: 'https://cloud.example.com',
    adminEmail: 'admin@example.com',
    timezone: 'Asia/Shanghai',
    language: 'zh-CN',
    dateFormat: 'YYYY-MM-DD',
    timeFormat: '24h'
  });

  // 系统性能配置
  const [performanceConfig, setPerformanceConfig] = useState({
    maxUploadSize: 100, // MB
    maxConcurrentUploads: 5,
    sessionTimeout: 30, // minutes
    cacheExpiration: 3600, // seconds
    enableGzip: true,
    enableCdn: false,
    cdnUrl: '',
    enableDebugMode: false
  });

  // 安全配置
  const [securityConfig, setSecurityConfig] = useState({
    enableTwoFactor: false,
    passwordMinLength: 8,
    passwordRequireSpecial: true,
    passwordRequireNumber: true,
    passwordRequireUppercase: true,
    maxLoginAttempts: 5,
    lockoutDuration: 15, // minutes
    enableCaptcha: true,
    enableIpWhitelist: false,
    ipWhitelist: ''
  });

  // 存储配置
  const [storageConfig, setStorageConfig] = useState({
    defaultStorage: 'local',
    localPath: '/var/www/storage',
    maxStoragePerUser: 10, // GB
    enableVersioning: true,
    maxVersions: 10,
    enableTrash: true,
    trashRetentionDays: 30,
    enableCompression: true
  });

  // 通知配置
  const [notificationConfig, setNotificationConfig] = useState({
    enableEmailNotifications: true,
    smtpHost: 'smtp.example.com',
    smtpPort: 587,
    smtpUsername: '',
    smtpPassword: '',
    smtpEncryption: 'tls',
    fromEmail: 'noreply@example.com',
    fromName: '筋斗云系统',
    enableWebhooks: false,
    webhookUrl: ''
  });

  const handleSave = () => {
    const allConfig = {
      basic: basicConfig,
      performance: performanceConfig,
      security: securityConfig,
      storage: storageConfig,
      notification: notificationConfig
    };
    
    console.log('保存系统配置:', allConfig);
    alert('系统配置已保存');
  };

  const handleReset = () => {
    if (confirm('确定要重置所有配置到默认值吗？')) {
      // 重置所有配置
      setBasicConfig({
        siteName: '筋斗云私有云盘',
        siteDescription: '智能私有云盘系统',
        siteUrl: 'https://cloud.example.com',
        adminEmail: 'admin@example.com',
        timezone: 'Asia/Shanghai',
        language: 'zh-CN',
        dateFormat: 'YYYY-MM-DD',
        timeFormat: '24h'
      });
      
      setPerformanceConfig({
        maxUploadSize: 100,
        maxConcurrentUploads: 5,
        sessionTimeout: 30,
        cacheExpiration: 3600,
        enableGzip: true,
        enableCdn: false,
        cdnUrl: '',
        enableDebugMode: false
      });
      
      setSecurityConfig({
        enableTwoFactor: false,
        passwordMinLength: 8,
        passwordRequireSpecial: true,
        passwordRequireNumber: true,
        passwordRequireUppercase: true,
        maxLoginAttempts: 5,
        lockoutDuration: 15,
        enableCaptcha: true,
        enableIpWhitelist: false,
        ipWhitelist: ''
      });
      
      setStorageConfig({
        defaultStorage: 'local',
        localPath: '/var/www/storage',
        maxStoragePerUser: 10,
        enableVersioning: true,
        maxVersions: 10,
        enableTrash: true,
        trashRetentionDays: 30,
        enableCompression: true
      });
      
      setNotificationConfig({
        enableEmailNotifications: true,
        smtpHost: 'smtp.example.com',
        smtpPort: 587,
        smtpUsername: '',
        smtpPassword: '',
        smtpEncryption: 'tls',
        fromEmail: 'noreply@example.com',
        fromName: '筋斗云系统',
        enableWebhooks: false,
        webhookUrl: ''
      });
    }
  };

  return (
    <>
      {/* 头部工具栏 */}
      <div className="mt-3">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            {/* 左侧：菜单按钮和标题 */}
            <div className="flex items-center space-x-4">
              <MenuToggle onClick={toggleSidebar} />
              
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
                  <Settings className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h1 className="text-2xl font-bold text-material-grey-800">
                    系统配置
                  </h1>
                  <p className="text-sm text-material-grey-600">
                    管理系统基础设置和参数
                  </p>
                </div>
              </div>
            </div>

            {/* 右侧：操作按钮 */}
            <div className="flex items-center space-x-3">
              <Button variant="outline" onClick={handleReset}>
                <RotateCcw className="w-4 h-4 mr-2" />
                重置配置
              </Button>
              <Button onClick={handleSave} className="bg-primary hover:bg-primary-600">
                <Save className="w-4 h-4 mr-2" />
                保存配置
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 container mx-auto px-4 py-6">
        <Tabs defaultValue="basic" className="w-full">
          <TabsList className="grid w-full grid-cols-5">
            <TabsTrigger value="basic">基础设置</TabsTrigger>
            <TabsTrigger value="performance">性能配置</TabsTrigger>
            <TabsTrigger value="security">安全设置</TabsTrigger>
            <TabsTrigger value="storage">存储配置</TabsTrigger>
            <TabsTrigger value="notification">通知设置</TabsTrigger>
          </TabsList>

          {/* 基础设置 */}
          <TabsContent value="basic" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Globe className="w-5 h-5" />
                  <span>基础设置</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <Label htmlFor="siteName">站点名称</Label>
                    <Input
                      id="siteName"
                      value={basicConfig.siteName}
                      onChange={(e) => setBasicConfig(prev => ({ ...prev, siteName: e.target.value }))}
                    />
                  </div>
                  
                  <div>
                    <Label htmlFor="siteUrl">站点URL</Label>
                    <Input
                      id="siteUrl"
                      value={basicConfig.siteUrl}
                      onChange={(e) => setBasicConfig(prev => ({ ...prev, siteUrl: e.target.value }))}
                    />
                  </div>
                  
                  <div className="md:col-span-2">
                    <Label htmlFor="siteDescription">站点描述</Label>
                    <Textarea
                      id="siteDescription"
                      value={basicConfig.siteDescription}
                      onChange={(e) => setBasicConfig(prev => ({ ...prev, siteDescription: e.target.value }))}
                      rows={3}
                    />
                  </div>
                  
                  <div>
                    <Label htmlFor="adminEmail">管理员邮箱</Label>
                    <Input
                      id="adminEmail"
                      type="email"
                      value={basicConfig.adminEmail}
                      onChange={(e) => setBasicConfig(prev => ({ ...prev, adminEmail: e.target.value }))}
                    />
                  </div>
                  
                  <div>
                    <Label htmlFor="timezone">时区</Label>
                    <Select value={basicConfig.timezone} onValueChange={(value) => setBasicConfig(prev => ({ ...prev, timezone: value }))}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Asia/Shanghai">北京时间 (UTC+8)</SelectItem>
                        <SelectItem value="Asia/Tokyo">东京时间 (UTC+9)</SelectItem>
                        <SelectItem value="America/New_York">纽约时间 (UTC-5)</SelectItem>
                        <SelectItem value="Europe/London">伦敦时间 (UTC+0)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  
                  <div>
                    <Label htmlFor="language">默认语言</Label>
                    <Select value={basicConfig.language} onValueChange={(value) => setBasicConfig(prev => ({ ...prev, language: value }))}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="zh-CN">简体中文</SelectItem>
                        <SelectItem value="zh-TW">繁体中文</SelectItem>
                        <SelectItem value="en-US">English (US)</SelectItem>
                        <SelectItem value="ja-JP">日本語</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  
                  <div>
                    <Label htmlFor="dateFormat">日期格式</Label>
                    <Select value={basicConfig.dateFormat} onValueChange={(value) => setBasicConfig(prev => ({ ...prev, dateFormat: value }))}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="YYYY-MM-DD">2024-01-20</SelectItem>
                        <SelectItem value="MM/DD/YYYY">01/20/2024</SelectItem>
                        <SelectItem value="DD/MM/YYYY">20/01/2024</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* 性能配置 */}
          <TabsContent value="performance" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Server className="w-5 h-5" />
                  <span>性能配置</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <Label htmlFor="maxUploadSize">最大上传文件大小 (MB)</Label>
                    <Input
                      id="maxUploadSize"
                      type="number"
                      value={performanceConfig.maxUploadSize}
                      onChange={(e) => setPerformanceConfig(prev => ({ ...prev, maxUploadSize: parseInt(e.target.value) }))}
                    />
                  </div>
                  
                  <div>
                    <Label htmlFor="maxConcurrentUploads">最大并发上传数</Label>
                    <Input
                      id="maxConcurrentUploads"
                      type="number"
                      value={performanceConfig.maxConcurrentUploads}
                      onChange={(e) => setPerformanceConfig(prev => ({ ...prev, maxConcurrentUploads: parseInt(e.target.value) }))}
                    />
                  </div>
                  
                  <div>
                    <Label htmlFor="sessionTimeout">会话超时时间 (分钟)</Label>
                    <Input
                      id="sessionTimeout"
                      type="number"
                      value={performanceConfig.sessionTimeout}
                      onChange={(e) => setPerformanceConfig(prev => ({ ...prev, sessionTimeout: parseInt(e.target.value) }))}
                    />
                  </div>
                  
                  <div>
                    <Label htmlFor="cacheExpiration">缓存过期时间 (秒)</Label>
                    <Input
                      id="cacheExpiration"
                      type="number"
                      value={performanceConfig.cacheExpiration}
                      onChange={(e) => setPerformanceConfig(prev => ({ ...prev, cacheExpiration: parseInt(e.target.value) }))}
                    />
                  </div>
                </div>
                
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="enableGzip">启用Gzip压缩</Label>
                      <p className="text-sm text-material-grey-600">压缩HTTP响应以减少带宽使用</p>
                    </div>
                    <Switch
                      id="enableGzip"
                      checked={performanceConfig.enableGzip}
                      onCheckedChange={(checked) => setPerformanceConfig(prev => ({ ...prev, enableGzip: checked }))}
                    />
                  </div>
                  
                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="enableCdn">启用CDN</Label>
                      <p className="text-sm text-material-grey-600">使用内容分发网络加速文件访问</p>
                    </div>
                    <Switch
                      id="enableCdn"
                      checked={performanceConfig.enableCdn}
                      onCheckedChange={(checked) => setPerformanceConfig(prev => ({ ...prev, enableCdn: checked }))}
                    />
                  </div>
                  
                  {performanceConfig.enableCdn && (
                    <div>
                      <Label htmlFor="cdnUrl">CDN地址</Label>
                      <Input
                        id="cdnUrl"
                        value={performanceConfig.cdnUrl}
                        onChange={(e) => setPerformanceConfig(prev => ({ ...prev, cdnUrl: e.target.value }))}
                        placeholder="https://cdn.example.com"
                      />
                    </div>
                  )}
                  
                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="enableDebugMode">调试模式</Label>
                      <p className="text-sm text-material-grey-600">启用详细的错误日志和调试信息</p>
                    </div>
                    <Switch
                      id="enableDebugMode"
                      checked={performanceConfig.enableDebugMode}
                      onCheckedChange={(checked) => setPerformanceConfig(prev => ({ ...prev, enableDebugMode: checked }))}
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* 安全设置 */}
          <TabsContent value="security" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Shield className="w-5 h-5" />
                  <span>安全设置</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <Label htmlFor="passwordMinLength">密码最小长度</Label>
                    <Input
                      id="passwordMinLength"
                      type="number"
                      min="6"
                      max="32"
                      value={securityConfig.passwordMinLength}
                      onChange={(e) => setSecurityConfig(prev => ({ ...prev, passwordMinLength: parseInt(e.target.value) }))}
                    />
                  </div>
                  
                  <div>
                    <Label htmlFor="maxLoginAttempts">最大登录尝试次数</Label>
                    <Input
                      id="maxLoginAttempts"
                      type="number"
                      min="3"
                      max="10"
                      value={securityConfig.maxLoginAttempts}
                      onChange={(e) => setSecurityConfig(prev => ({ ...prev, maxLoginAttempts: parseInt(e.target.value) }))}
                    />
                  </div>
                  
                  <div>
                    <Label htmlFor="lockoutDuration">锁定时长 (分钟)</Label>
                    <Input
                      id="lockoutDuration"
                      type="number"
                      min="5"
                      max="60"
                      value={securityConfig.lockoutDuration}
                      onChange={(e) => setSecurityConfig(prev => ({ ...prev, lockoutDuration: parseInt(e.target.value) }))}
                    />
                  </div>
                </div>
                
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="enableTwoFactor">启用双因素认证</Label>
                      <p className="text-sm text-material-grey-600">要求用户使用第二种验证方式</p>
                    </div>
                    <Switch
                      id="enableTwoFactor"
                      checked={securityConfig.enableTwoFactor}
                      onCheckedChange={(checked) => setSecurityConfig(prev => ({ ...prev, enableTwoFactor: checked }))}
                    />
                  </div>
                  
                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="passwordRequireSpecial">密码需要特殊字符</Label>
                      <p className="text-sm text-material-grey-600">密码必须包含特殊字符</p>
                    </div>
                    <Switch
                      id="passwordRequireSpecial"
                      checked={securityConfig.passwordRequireSpecial}
                      onCheckedChange={(checked) => setSecurityConfig(prev => ({ ...prev, passwordRequireSpecial: checked }))}
                    />
                  </div>
                  
                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="passwordRequireNumber">密码需要数字</Label>
                      <p className="text-sm text-material-grey-600">密码必须包含数字</p>
                    </div>
                    <Switch
                      id="passwordRequireNumber"
                      checked={securityConfig.passwordRequireNumber}
                      onCheckedChange={(checked) => setSecurityConfig(prev => ({ ...prev, passwordRequireNumber: checked }))}
                    />
                  </div>
                  
                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="passwordRequireUppercase">密码需要大写字母</Label>
                      <p className="text-sm text-material-grey-600">密码必须包含大写字母</p>
                    </div>
                    <Switch
                      id="passwordRequireUppercase"
                      checked={securityConfig.passwordRequireUppercase}
                      onCheckedChange={(checked) => setSecurityConfig(prev => ({ ...prev, passwordRequireUppercase: checked }))}
                    />
                  </div>
                  
                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="enableCaptcha">启用验证码</Label>
                      <p className="text-sm text-material-grey-600">在登录时显示验证码</p>
                    </div>
                    <Switch
                      id="enableCaptcha"
                      checked={securityConfig.enableCaptcha}
                      onCheckedChange={(checked) => setSecurityConfig(prev => ({ ...prev, enableCaptcha: checked }))}
                    />
                  </div>
                  
                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="enableIpWhitelist">启用IP白名单</Label>
                      <p className="text-sm text-material-grey-600">只允许指定IP地址访问</p>
                    </div>
                    <Switch
                      id="enableIpWhitelist"
                      checked={securityConfig.enableIpWhitelist}
                      onCheckedChange={(checked) => setSecurityConfig(prev => ({ ...prev, enableIpWhitelist: checked }))}
                    />
                  </div>
                  
                  {securityConfig.enableIpWhitelist && (
                    <div>
                      <Label htmlFor="ipWhitelist">IP白名单</Label>
                      <Textarea
                        id="ipWhitelist"
                        value={securityConfig.ipWhitelist}
                        onChange={(e) => setSecurityConfig(prev => ({ ...prev, ipWhitelist: e.target.value }))}
                        placeholder="每行一个IP地址或IP段，例如：&#10;192.168.1.1&#10;192.168.1.0/24"
                        rows={4}
                      />
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* 存储配置 */}
          <TabsContent value="storage" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Database className="w-5 h-5" />
                  <span>存储配置</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <Label htmlFor="defaultStorage">默认存储方式</Label>
                    <Select value={storageConfig.defaultStorage} onValueChange={(value) => setStorageConfig(prev => ({ ...prev, defaultStorage: value }))}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="local">本地存储</SelectItem>
                        <SelectItem value="s3">Amazon S3</SelectItem>
                        <SelectItem value="oss">阿里云OSS</SelectItem>
                        <SelectItem value="cos">腾讯云COS</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  
                  <div>
                    <Label htmlFor="localPath">本地存储路径</Label>
                    <Input
                      id="localPath"
                      value={storageConfig.localPath}
                      onChange={(e) => setStorageConfig(prev => ({ ...prev, localPath: e.target.value }))}
                    />
                  </div>
                  
                  <div>
                    <Label htmlFor="maxStoragePerUser">用户最大存储空间 (GB)</Label>
                    <Input
                      id="maxStoragePerUser"
                      type="number"
                      min="1"
                      value={storageConfig.maxStoragePerUser}
                      onChange={(e) => setStorageConfig(prev => ({ ...prev, maxStoragePerUser: parseInt(e.target.value) }))}
                    />
                  </div>
                  
                  <div>
                    <Label htmlFor="maxVersions">最大版本数</Label>
                    <Input
                      id="maxVersions"
                      type="number"
                      min="1"
                      max="50"
                      value={storageConfig.maxVersions}
                      onChange={(e) => setStorageConfig(prev => ({ ...prev, maxVersions: parseInt(e.target.value) }))}
                    />
                  </div>
                  
                  <div>
                    <Label htmlFor="trashRetentionDays">回收站保留天数</Label>
                    <Input
                      id="trashRetentionDays"
                      type="number"
                      min="1"
                      max="365"
                      value={storageConfig.trashRetentionDays}
                      onChange={(e) => setStorageConfig(prev => ({ ...prev, trashRetentionDays: parseInt(e.target.value) }))}
                    />
                  </div>
                </div>
                
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="enableVersioning">启用文件版本控制</Label>
                      <p className="text-sm text-material-grey-600">保存文件的历史版本</p>
                    </div>
                    <Switch
                      id="enableVersioning"
                      checked={storageConfig.enableVersioning}
                      onCheckedChange={(checked) => setStorageConfig(prev => ({ ...prev, enableVersioning: checked }))}
                    />
                  </div>
                  
                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="enableTrash">启用回收站</Label>
                      <p className="text-sm text-material-grey-600">删除的文件移动到回收站</p>
                    </div>
                    <Switch
                      id="enableTrash"
                      checked={storageConfig.enableTrash}
                      onCheckedChange={(checked) => setStorageConfig(prev => ({ ...prev, enableTrash: checked }))}
                    />
                  </div>
                  
                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="enableCompression">启用文件压缩</Label>
                      <p className="text-sm text-material-grey-600">自动压缩文件以节省空间</p>
                    </div>
                    <Switch
                      id="enableCompression"
                      checked={storageConfig.enableCompression}
                      onCheckedChange={(checked) => setStorageConfig(prev => ({ ...prev, enableCompression: checked }))}
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* 通知设置 */}
          <TabsContent value="notification" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Mail className="w-5 h-5" />
                  <span>通知设置</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="enableEmailNotifications">启用邮件通知</Label>
                    <p className="text-sm text-material-grey-600">发送系统通知邮件</p>
                  </div>
                  <Switch
                    id="enableEmailNotifications"
                    checked={notificationConfig.enableEmailNotifications}
                    onCheckedChange={(checked) => setNotificationConfig(prev => ({ ...prev, enableEmailNotifications: checked }))}
                  />
                </div>
                
                {notificationConfig.enableEmailNotifications && (
                  <div className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor="smtpHost">SMTP服务器</Label>
                        <Input
                          id="smtpHost"
                          value={notificationConfig.smtpHost}
                          onChange={(e) => setNotificationConfig(prev => ({ ...prev, smtpHost: e.target.value }))}
                        />
                      </div>
                      
                      <div>
                        <Label htmlFor="smtpPort">SMTP端口</Label>
                        <Input
                          id="smtpPort"
                          type="number"
                          value={notificationConfig.smtpPort}
                          onChange={(e) => setNotificationConfig(prev => ({ ...prev, smtpPort: parseInt(e.target.value) }))}
                        />
                      </div>
                      
                      <div>
                        <Label htmlFor="smtpUsername">SMTP用户名</Label>
                        <Input
                          id="smtpUsername"
                          value={notificationConfig.smtpUsername}
                          onChange={(e) => setNotificationConfig(prev => ({ ...prev, smtpUsername: e.target.value }))}
                        />
                      </div>
                      
                      <div>
                        <Label htmlFor="smtpPassword">SMTP密码</Label>
                        <Input
                          id="smtpPassword"
                          type="password"
                          value={notificationConfig.smtpPassword}
                          onChange={(e) => setNotificationConfig(prev => ({ ...prev, smtpPassword: e.target.value }))}
                        />
                      </div>
                      
                      <div>
                        <Label htmlFor="smtpEncryption">加密方式</Label>
                        <Select value={notificationConfig.smtpEncryption} onValueChange={(value) => setNotificationConfig(prev => ({ ...prev, smtpEncryption: value }))}>
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="none">无加密</SelectItem>
                            <SelectItem value="tls">TLS</SelectItem>
                            <SelectItem value="ssl">SSL</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      
                      <div>
                        <Label htmlFor="fromEmail">发件人邮箱</Label>
                        <Input
                          id="fromEmail"
                          type="email"
                          value={notificationConfig.fromEmail}
                          onChange={(e) => setNotificationConfig(prev => ({ ...prev, fromEmail: e.target.value }))}
                        />
                      </div>
                      
                      <div className="md:col-span-2">
                        <Label htmlFor="fromName">发件人名称</Label>
                        <Input
                          id="fromName"
                          value={notificationConfig.fromName}
                          onChange={(e) => setNotificationConfig(prev => ({ ...prev, fromName: e.target.value }))}
                        />
                      </div>
                    </div>
                  </div>
                )}
                
                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="enableWebhooks">启用Webhook</Label>
                    <p className="text-sm text-material-grey-600">发送HTTP通知到指定URL</p>
                  </div>
                  <Switch
                    id="enableWebhooks"
                    checked={notificationConfig.enableWebhooks}
                    onCheckedChange={(checked) => setNotificationConfig(prev => ({ ...prev, enableWebhooks: checked }))}
                  />
                </div>
                
                {notificationConfig.enableWebhooks && (
                  <div>
                    <Label htmlFor="webhookUrl">Webhook URL</Label>
                    <Input
                      id="webhookUrl"
                      value={notificationConfig.webhookUrl}
                      onChange={(e) => setNotificationConfig(prev => ({ ...prev, webhookUrl: e.target.value }))}
                      placeholder="https://example.com/webhook"
                    />
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </>
  );
};

export default SystemConfig;
